<template>
    <div class="buyer-customers-list">
        <div class="logo_top">
            <el-image :src="logoImage" style="width:543px" />
        </div>
        <div class="selectedRegion">
            <el-input v-model="searchKeyword" clearable style="width: 926px; border-left: none; font-size: 16px;margin-left: 30px;"
                placeholder="请输入企业名称、经营范围等关键字" @keyup.enter.native="handleSearch()" class="input-with-select">
                <!-- 添加搜索图标 -->
                <template #prefix>
                    <el-icon style="color: #383838; margin-right: 5px;">
                        <Search />
                    </el-icon>
                </template>
                <template #prepend>
                    <!-- 使用引入的 options 数据 -->
                    <el-select v-model="selectedRegion" placeholder="选择地区" class="custom-select" >
                        <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.name" />
                    </el-select>
                </template>
                <template #append>
                    <div class="Search" @click="handleSearch">查询一下</div>
                </template>
            </el-input>
        </div>
        <div class="list">
            <div class="l_text">
                精选客户
            </div>
            <!-- 加载图片 -->
            <div v-if="isLoading" style="text-align: center; padding: 40px 0;">
                <img src="@/assets/images/looder.png" alt="加载中" style="width: 156px;
height: 93.53px;margin-top: 86px;">
            </div>
            <!-- 使用 v-for 循环渲染 CompanyInfo 组件 -->
            <CompanyInfo v-for="companyInfo in companyInfoList" :key="companyInfo.socialCreditCode"
                :companyInfo="companyInfo" @child-action="showOpenMemberModal = true" />

            <!-- 原有 GlobalModal 保留，新增一个用于 OpenMember 的 GlobalModal -->
            <GlobalModal v-model:visible="showModal" title="会员提醒" @confirm="handleConfirm" @cancel="handleCancel">
            </GlobalModal>
            <GlobalModal v-model:visible="showOpenMemberModal" title="开通会员" :element-loading-fullscreen="true"
                :element-loading-lock="true">
            </GlobalModal>

        </div>
    </div>
  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>

<script lang="ts" setup>
import { onMounted, ref, onActivated } from 'vue';

import baseService from "@/service/baseService";
import logoImage from '@/assets/images/logo1.png';
import { CacheToken } from "@/constants/cacheKey";
import { getCache, setCache } from "@/utils/cache";
// 引入 CompanyInfo 组件
import CompanyInfo from './constants/CompanyInfo.vue';
// 引入 OpenMember 组件
import OpenMember from './constants/OpenMember.vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";


const router = useRouter();
// 加载状态
const isLoading = ref(false);

// 地区列表配置
const props1 = {
    checkStrictly: true,
    label: 'name',  // 将显示字段改为 name
    value: 'code'   // 将值字段改为 code
};
const options = ref([]);
// 选中的地区
const selectedRegion = ref('中国');
// 搜索关键词
const searchKeyword = ref('');
const showModal = ref(false);
// 控制 OpenMember 弹窗显示的 ref
const showOpenMemberModal = ref(false);
const companyInfoList = ref([]);
// 定义开通会员组件的参数对象
const memberConfig = {
    title: '开通会员',
    description: '立即开通会员享受更多优惠',
    buttonText: '立即开通',
    buttonType: 'primary'
};
const cascaderRef = ref(null);
// 打开 OpenMember 弹窗

// 关闭 OpenMember 弹窗
const closeOpenMemberModal = () => {
    showOpenMemberModal.value = false;
};

// 处理开通会员事件
const handleOpenMember = () => {
    console.log('用户点击了开通会员按钮');
    // 这里可以添加实际的开通会员请求逻辑
    closeOpenMemberModal();
};
const listdata = () => {
    isLoading.value = true; // 开始加载
    companyInfoList.value = [];
    baseService.get('/noc/companybasicinfo/getSelectedCustomer', {}).then((res) => {
        if (res.code == 0) {
            isLoading.value = false; // 请求完成隐藏加载

            //刷新
            companyInfoList.value = res.list;
        }
    })
    baseService.get('/noc/basearea/getCity', {}).then((res) => {
        if (res.code == 0) {
            options.value = res.list
            //刷新
            // companyInfoList.value = res.list;
        }
    })
}

// 组件挂载时执行初始化操作
onMounted(() => {
    // 可以在这里添加获取买家客户列表数据的逻辑
    console.log('买家客户列表页面已加载');
    // 新增：使用 CacheToken 获取缓存的 token
    const token = getCache(CacheToken, { isSessionStorage: true });
    showModal.value = !token.isObtainedVipFree;
    console.log("获取到的缓存 token:", token);
    // listdata()
});
onActivated(() => {
    console.log('页面已显示');
    listdata(); // 重新加载数据
});
const handleConfirm = () => {
    console.log('用户点击了确认按钮');
    baseService.post(`/noc/vip/obtainVipFree`, {
    }).then(res => {
        if (res.code == 0 && res.data.success) {
            showModal.value = false;
            const token = getCache(CacheToken, { isSessionStorage: true });
            token.isObtainedVipFree = true;
            setCache(CacheToken, token, { isSessionStorage: true });
        } else {
        }
    })

};

const handleCancel = () => {
    console.log('用户点击了取消按钮');
};
// 处理搜索逻辑
const handleSearch = () => {
  const token = getCache(CacheToken, {isSessionStorage: true});
  if (!token.isVip) return showOpenMemberModal.value = true;

  if (searchKeyword.value == '') return ElMessage({
    message: '请输入搜索关键词',
    type: 'warning',
  });
  console.log('选中地区:', selectedRegion.value);
  console.log('搜索关键词:', searchKeyword.value);
  router.replace({
    path: '/search-result',
    query: {
      name: searchKeyword.value
    }
  })
  // 这里可以添加实际的搜索请求逻辑
};
</script>
<style lang="less" scoped>
.el-card__body:has(> .buyer-customers-list) {
    padding: 0 !important;
    /* 取消默认padding */
}

::v-deep .el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper:focus {
    // ... existing code ...
    box-shadow: none !important;
    /* 添加此行移除阴影 */
}

/* 额外覆盖可能的hover状态 */
::v-deep .el-input-group--prepend .el-input-group__prepend .el-select.custom-select:hover .el-input__wrapper,
::v-deep .el-input-group--prepend .el-input-group__prepend .el-select.custom-select .el-input__wrapper:hover {
    box-shadow: none !important;
    border-color: #dcdfe6 !important;
}
::v-deep(.buyer-customers-list[data-v-07372378] .custom-select) {
  border-right: 1px solid rgba(22, 119, 255, 1) !important;
}
.buyer-customers-list {
    background: url('@/assets/images/bug_ba.png') no-repeat top left;
    background-size: 100% auto;
    font-family: "Microsoft YaHei";

    .logo_top {
        width: 543px;
        margin: 0 auto;
        padding-top: 41px;
    }

    :deep(.custom-select .el-input__wrapper) {
        /* 取消边框 */
        /* 取消焦点状态下的边框和阴影 */
        box-shadow: none !important;
        /* 可选：如果需要移除背景色 */
        background-color: transparent !important;
    }
    /* 单独设置文字颜色，避免嵌套穿透问题 */
    ::v-deep(.custom-select .el-input__inner) {
        color: rgba(22, 119, 255, 1) !important;
    }
 /* 单独设置文字颜色，避免嵌套穿透问题 */
     ::v-deep(.custom-select  .el-input .el-select__caret.el-icon) {
        // ... existing code ...
        color: rgba(22, 119, 255, 1) !important;
        fill: rgba(22, 119, 255, 1) !important; // 针对SVG图标
        // ... existing code ...
    }
 ::v-deep(.el-input-group--append>.el-input__wrapper){
box-shadow: none !important;
}
.el-select.custom-select .el-input__suffix-inner,
.el-select.custom-select .el-input__suffix-inner::after,
.el-select.custom-select .el-icon-arrow-down {
  color: rgba(22, 119, 255, 1) !important;
  fill: rgba(22, 119, 255, 1) !important;
  border-color: rgba(22, 119, 255, 1) !important;
  opacity: 1 !important;
}
    :deep(.custom-select) {
        // 调整输入框高度
        width: 97px;
        height: 46px;
        background: #fff;
        border-right: 1px solid rgba(22, 119, 255, 1);
        padding-top: 7px;
        color: rgba(22, 119, 255, 1);



        // 新增：全场景焦点状态重置（覆盖所有可能触发边框的元素）
        &,
        &.is-focus,
        &:focus,
        &:focus-within,
        .el-select__wrapper,
        .el-select__wrapper:focus-within,
        .el-input,
        .el-input__wrapper,
        .el-input__inner {
            border-color: rgba(212, 212, 212, 1) !important;
            box-shadow: none !important;
            outline: none !important;
        }


        // 内部输入框焦点状态重置
        .el-input__inner {
            &:focus {
                border: none !important;
                box-shadow: none !important;
                outline: none !important;
            }
        }

        // 下拉触发区域样式
        .select-trigger {
            width: 78px;
        }

        // 修改输入框字体颜色
        :deep(.el-input__inner) {
            color: rgba(22, 119, 255, 1);
        }

        // 修改箭头样式


      /* 覆盖所有可能的箭头元素 */
:deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix),
:deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix-inner),
:deep(.el-input-group__prepend .el-select.custom-select .el-input__suffix-inner::after),
:deep(.el-input-group__prepend .el-select.custom-select .el-icon-arrow-down) {
  color: rgba(22, 119, 255, 1) !important;
  fill: rgba(22, 119, 255, 1) !important;
  border-color: rgba(22, 119, 255, 1) transparent transparent !important;
  opacity: 1 !important; /* 确保箭头可见 */
}

/* 下拉面板箭头 */
:deep(.el-select-dropdown__arrow) {
  border-top-color: rgba(22, 119, 255, 1) !important;
}
    }

    .selectedRegion {
        max-width: 1131px;
        // width: 1131px;
        margin: 0 auto;
        padding-top: 39px;
        font-size: 16px;

        .Search {
            border-radius: 3px;
            width: 106px;
            height: 46px;
            text-align: center;
            line-height: 46px;
            color: #fff;
            font-size: 16px;
            background: rgba(255, 152, 48, 1);
            cursor: pointer
        }

        :deep(.el-input-group__prepend) {
            /* 设置内边距，可根据需求调整值 */
            padding: 0;
            background: #fff;
        }

        // 新增样式，取消 .el-input-group__append 的 padding
        :deep(.el-input-group__append) {
            padding: 0;
        }

        :deep(.custom-cascader .el-input__wrapper) {
        margin-top: 3px;

            /* 取消边框 */
            border: none;
            /* 取消阴影 */
            box-shadow: none;
        }

        :deep(.custom-cascader) {
            // 调整输入框高度
            width: 97px;
            height: 46px;
            background: #fff;
            border: 1px solid rgba(212, 212, 212, 1);
            border-right: none;
            padding-top: 7px;
            color: rgba(22, 119, 255, 1);

            .el-input {
                height: 35px;
                line-height: 35px;
                border-right: 2px solid rgba(135, 185, 255, 1);
            }

            // 修改输入框字体颜色
            :deep(.el-input__inner) {
                color: rgba(22, 119, 255, 1);
            }

            // 调整下拉面板背景色
            .el-cascader-panel {
                background-color: #f9f9f9;
            }

            // 调整选项悬停状态样式
            .el-cascader-node:hover {
                background-color: #e6f7ff;
            }

            // 调整选中选项样式
            .el-cascader-node.is-active {
                color: #1890ff;
            }

            // 修改箭头样式
            :deep(.el-input__suffix-inner .el-icon-arrow-down) {
                // 修改箭头颜色
                color: #1890ff !important;
                // 修改箭头大小
                font-size: 16px !important;
                // 可以添加其他样式，如旋转、过渡效果等
                transition: transform 0.3s ease;
            }

            // 下拉面板展开时箭头旋转效果
            &.is-focus :deep(.el-input__suffix-inner .el-icon-arrow-down) {
                transform: rotate(180deg) !important;
            }

            :deep(.input-with-select .el-input__wrapper) {
                /* 取消左边框 */
                border-left: none;
                /* 取消左阴影 */
                box-shadow: none !important;
            }

            // 修改输入框字体颜色
            :deep(.el-input__inner) {
                color: #FF0000; // 可根据需求修改颜色值
            }

            // 修改下拉面板选项字体颜色
            :deep(.el-cascader-panel .el-cascader-node__label) {
                color: #00FF00; // 可根据需求修改颜色值
            }

            // 修改选中选项字体颜色
            :deep(.el-cascader-panel .el-cascader-node.is-active .el-cascader-node__label) {
                color: #0000FF; // 可根据需求修改颜色值
            }
        }
    }

    .list {
        padding-top: 46px;
        margin: 0 80px;

        .l_text {
            font-size: 20px;
            font-family: "Microsoft YaHei";
            padding-left: 30px;
            font-weight: bold;
            line-height: 50px;
            background: url('@/assets/images/PremiumImages.png') no-repeat left center;
            background-size: 21.04px 23px;
            ;
            border-bottom: 1px solid rgba(199, 199, 199, 1);
        }
    }
}
</style>
